<template>
	<div>
		<div class="crumbs">
			<el-breadcrumb separator="/">
	<!-- 			<el-breadcrumb-item>
					<i class="el-icon-lx-cascades"></i> 分类管理
				</el-breadcrumb-item> -->
			</el-breadcrumb>
		</div>
		<div class="container">
			<el-button style="float: left;" type="primary" icon="el-icon-circle-plus-outline" @click="openAdd">添加类别</el-button>
			<el-form :inline="true" :model="editForm" class="user-search" style="float: right;">
		<el-select v-model="editForm.category" placeholder="商品类型" class="handle-select mr10">
		 <el-option selected label="请选择" value="0"></el-option>
		 <el-option v-for="category in categoryaggregate" :key="category.oneTypeId" :label="category.oneType" :value="category.oneTypeId">

     </el-option>
		 </el-select>
				<el-button type="primary" icon="el-icon-search" @click="handleSearch">搜索</el-button>
		</el-form>
			<el-table :data="tableData" border class="table" ref="multipleTable" header-cell-class-name="table-header"
				@selection-change="handleSelectionChange">
        <el-table-column header-align="center" align="center" type="index" label="序号" fixed="left"></el-table-column>
				<el-table-column prop="categoryId" label="ID" width="55" align="center"></el-table-column>
        	<el-table-column prop="img" label="类型图片" align="center">
       <template #default="scope">
                  <el-image class="table-td-thumb" :src="ip+scope.row.img" :preview-src-list="[ip+scope.row.img]">
                  </el-image>
                </template>
          </el-table-column>
				<el-table-column prop="typeName" label="类型名称"></el-table-column>
					<el-table-column prop="oneType" label="归属大类"></el-table-column>
				  <el-table-column label="操作" width="180" align="center">
				        <template #default="scope">
				            <el-button type="text" icon="el-icon-edit" @click="openEdit(scope.$index, scope.row)">编辑
				            </el-button>
				            <el-button type="text" icon="el-icon-delete" class="red"
				                @click="handleDelete(scope.$index, scope.row)">删除</el-button>
				        </template>
				    </el-table-column>
				</el-table>
		<div class="pagination">
		  <el-pagination background layout="total, prev, pager, next" :current-page="this.pageIndex"
		    :page-size="this.pageSize" :total="pageTotal" @size-chage="handleSizeChange" @current-change="handlePageChange"></el-pagination>
		</div>
		</div>

		<!-- 编辑弹出框 -->

		<el-dialog title="编辑" :visible.sync="editVisible" width="30%">
		 <el-form ref="form" :model="form" label-width="70px">
       <el-form-item label="类别ID">
       	<el-input v-model="form.id" disabled="false"></el-input>
       </el-form-item>
				<el-form-item label="类别名称">
					<el-input v-model="form.typeName"></el-input>
				</el-form-item>
				<el-form-item label="归属大类">
				   <el-select v-model="form.category" placeholder="商品类型" class="handle-select mr10">
				    <el-option selected label="请选择" value="0"></el-option>
				    <el-option v-for="category in categoryaggregate" :key="category.oneTypeId" :label="category.oneType" :value="category.oneTypeId">

				    </el-option>
				    </el-select>
				</el-form-item>
      <el-form-item label="图片上传">
                <el-upload
                  v-model="form.image"
                  class="upload-demo"
                  action="http://43.142.173.112:9090/adminGoods/uploadImage"
                  :on-success="onSuccess"
                  :on-preview="handlePreview"
                  :on-remove="handleRemove"
                  list-type="picture">
                  <el-button size="small" type="primary">点击上传商品图片</el-button>
                </el-upload>
              </el-form-item>
 <el-form-item label="类别图片">
       	<el-image class="table-td-thumb" :src="ip+form.zhaopian" :preview-src-list="[ip+form.zhaopian]">
       	          </el-image>
       </el-form-item>

			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button @click="editVisible = false">取 消</el-button>
				<el-button type="primary" @click="saveEdit()">确 定</el-button>
			</span>
		</el-dialog>
		<!-- 添加弹出框 -->
		<el-dialog title="新增商品类别" :visible.sync="addVisible" width="30%">
			<el-form :model="addForm" label-width="70px">
		        <el-form-item label="类别名称">
		            <el-input v-model="addForm.typeName"></el-input>
		        </el-form-item>
		        <el-form-item label="归属大类">
		           <el-select v-model="addForm.category" placeholder="商品类型" class="handle-select mr10">
		            <el-option selected label="请选择" value="0"></el-option>
		            <el-option v-for="category in categoryaggregate" :key="category.oneTypeId" :label="category.oneType" :value="category.oneTypeId">

		            </el-option>
		            </el-select>
		        </el-form-item>
<el-form-item label="图片上传">
          <el-upload
            v-model="addForm.image"
            class="upload-demo"
            action="http://43.142.173.112:9090/adminGoods/uploadImage"
            :on-success="onSuccess"
            :on-preview="handlePreview"
            :on-remove="handleRemove"
            list-type="picture">
            <el-button size="small" type="primary">点击上传商品图片</el-button>
          </el-upload>
        </el-form-item>
		    </el-form>
		    <template #footer>
		        <span class="dialog-footer">
		            <el-button @click="addVisible = false">取 消</el-button>
		            <el-button type="primary" @click="repairAdd()">确 定</el-button>
		        </span>
		    </template>
		</el-dialog>
	</div>
</template>

<script>

	export default {
		name: 'basetable',
		data() {
			return {
            fileList: [{
                  name: 'food.jpeg',
                  url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'
                }],
				tableData:[],
        // 分类集合
        categoryaggregate: [],
				multipleSelection: [],
				delList: [],
          ip:'http://43.142.173.112:16622/images/',
				editVisible: false,
				addVisible: false,
				pageIndex: 1,
				pageSize: 5,
				pageTotal: "",
			form:
				{
          id:"",
					typeName: "",
					category: "",
			    image:"",
          zhaopian:""
				}
			,
				addForm:
					{
						typeName: "",
						category: "",
            image:""
					}
				,
        // 搜索框
        editForm: {
          category: ''
        },
				idx: -1,
				id: -1
			};
		},
		created() {
			   this.handleSearch();
		},
		methods: {
			// 获取 easy-mock 的模拟数据
			getData() {

			},
      handleRemove(file, fileList) {
              // console.log(file, fileList);
            },
            handlePreview(file) {
              // console.log(file);
            },
            onSuccess(response){
              this.$data.addForm.image=response.fileUrl,
              this.$data.form.image=response.fileUrl
              console.log(this.$data.addForm.image)
            },

            onSubmit() {
              console.log(this.fileList)
            },
			// 触发搜索按钮
			handleSearch() {
   this.$axios.post('/adminGoods/search', this.$qs.stringify({
          pagenum: this.$data.pageIndex,
          pagesize: this.$data.pageSize,
          categoryId: this.editForm.category>0 ?this.editForm.category:0,
          headers: {
            'Content-Type': 'application/json;charset=UTF-8'
          },
        })).then(response => {
          console.log(response)
          // eslint-disable-next-line eqeqeq
          if (response.data != null) {
            console.log(response.data)
            // 接收后台发来的map集合table是表数据，total是总数
            this.tableData = response.data.table
            this.pageTotal = response.data.total
          }
        }).catch(err => {
          alert(err)
        })
			},
      //新增二级类别
      repairAdd(){
        this.$axios.post('/adminGoods/add', this.$qs.stringify({
           typeName: this.addForm.typeName,
           category:this.addForm.category,
           image:this.addForm.image
          })).then(response => {
          console.log(response)
          if (response.data != null) {
            		console.log('数据接收');
            console.log(response.data)
          if(response.data=='1'){
            this.$message({
              type: 'success',
              message: '添加成功!'
            });
              this.$data.addVisible = false;
              window.location.reload() // 强制刷新
              this.handleSearch();
          }else{
            this.$message({
              type: 'fail',
              message: '添加失败!'
            });
          }
          }
        })
      },
			// 删除操作
			handleDelete(index, row) {
  this.$confirm('此操作将永久删除该商品类别, 是否继续?', '提示', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning'
            }).then(() => {
  this.$axios.post('/adminGoods/del', this.$qs.stringify({
    categoryId: row.categoryId
  })).then(response => {
  				  console.log(response)
  				  if (response.data != null) {
  				      		console.log('数据接收');
  				      console.log(response.data)
  				    if(response.data=='1'){
  				      this.$message({
  				        type: 'success',
  				        message: '删除成功!'
  				      });
this.handleSearch();
  				    }else{
  				      this.$message({
  				        type: 'fail',
  				        message: '删除失败!'
  				      });
  				    }
  				    }
  				  })
  				    }).catch(() => {
  				      this.$message({
  				        type: 'info',
  				        message: '已取消删除'
  				      });
  				    });
			},
			// 多选操作
			handleSelectionChange(val) {
				this.multipleSelection = val;
			},
			delAllSelection() {

			},

			// 编辑操作
			openEdit(index, row){
		this.$confirm('此操作将修改商品类别信息, 是否继续?', '提示', {
		  confirmButtonText: '确定',
		  cancelButtonText: '取消',
		  type: 'warning'
		}).then(() => {
      this.form.id = row.categoryId;
		  this.form.typeName = row.typeName;
		  // this.form.category = row.oneType;
		  this.form.zhaopian = row.img;
		  this.$data.editVisible = true;
		}).catch(() => {
		  this.$message({
		    type: 'info',
		    message: '已取消修改'
		  });
		});
			},
			// 保存编辑
			saveEdit() {
this.$axios.post('/adminGoods/modify', this.$qs.stringify({
             id: this.form.id,
             typeName: this.form.typeName,
             category: this.form.category,
             image:this.form.image

             })).then(response => {
   				  console.log(response)
   				  if (response.data != null) {
   				    		console.log('数据接收');
   				    console.log(response.data)
   				  if(response.data=='1'){
   				    this.$message({
   				      type: 'success',
   				      message: '编辑修改成功!',

   				    });
  this.$data.editVisible = false;
   window.location.reload() // 强制刷新
    this.handleSearch();
   				  }else{
   				    this.$message({
   				      type: 'fail',
   				      message: '编辑修改失败!'
   				    });
   				  }
   				  }
   				})

			},
			//添加操作
			openAdd(){
				this.addVisible = true;
			},
			// 分页导航
			handlePageChange(val) {
			this.pageIndex=val
			this.handleSearch();
			},
      //条数
      handleSizeChange(val){
        this.pageSize=val
        this.handleSearch();
      }
		},
    // 页面加载
    mounted: function () {

      getRoleId(this)
    }
	}
  // 动态绑定类别下拉框
  async function getRoleId ($this) {

   $this.$axios({
     url: '/adminGoods/category',
     method: 'get',
     // params: {
     //   parentid: 1
     // }
   }).then(res => {
     console.log('数据', res.data)
     $this.categoryaggregate = res.data
     console.log('下拉', $this.categoryaggregate)
   })

  }
</script>

<style scoped>
	.handle-box {
		margin-bottom: 20px;
	}

	.handle-select {
		width: 120px;
	}

	.handle-input {
		width: 300px;
		display: inline-block;
	}

	.table {
		width: 100%;
		font-size: 14px;
	}

	.red {
		color: #ff0000;
	}

	.mr10 {
		margin-right: 10px;
	}

	.table-td-thumb {
		display: block;
		margin: auto;
		width: 40px;
		height: 40px;
	}
</style>
